/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
import React from 'react';
import { Tabs, Form, Input, InputNumber, Checkbox } from 'antd';
import BaseControl from './BaseControl';
import BindSelect from '../common/BindSelect';

const { TabPane } = Tabs;

/**
 * 多文本控件
 */
class TextAreaControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new TextAreaControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '多行文本',
      type: 'TextArea',
      required: false, // 是否必填
      defaultValue: '',
      placeholder: '',
      lines: 5,
      widthPercent: 100,
      height: 0,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '多行文本';

    // this.icon = '';
  }

  load(json) {
    super.load(json);
    this.value = this.value == null ? this.data.defaultValue : this.value;
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="必填">
          <Checkbox
            checked={this.data.required}
            onChange={(e) => {
              this.data.required = e.target.checked;
              parentForm.refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="默认值">
          <BindSelect
            data={this.data}
            field="defaultValue"
            defaultValue=""
            child={() => {
              return (
                <>
                  <Input
                    placeholder="默认值"
                    value={this.data.defaultValue}
                    onChange={(event) => {
                      this.data.defaultValue = event.target.value;
                      parentForm.refreash();
                    }}
                  />
                </>
              );
            }}
          />
        </Form.Item>
        <Form.Item label="提示内容">
          <Input
            placeholder="提示内容"
            value={this.data.placeholder}
            onChange={(event) => {
              this.data.placeholder = event.target.value;
              parentForm.refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="行数">
          <InputNumber
            min={0}
            value={this.data.lines}
            onChange={(event) => {
              this.data.lines = event;
              parentForm.refreash();
            }}
          />
        </Form.Item>
      </TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <Input.TextArea
        placeholder={this.data.placeholder}
        rows={this.data.lines}
        value={this.value}
        {...this.extProps}
        onChange={(event) => {
          this.value = event.target.value;
          parentForm.refreash();
          this.extProps?.onChange && this.extProps?.onChange(event);
        }}
      />
    );
  }
}

export default TextAreaControl;
